<template>
    <div id="offer">
      <load-more tip="加载数据中..." v-if="!loading"></load-more>
      <div v-if="loading">
        <group style="margin-top: 0.15rem;">
          <cell title="参考里程" value-align="left" :value="dataObj.mileage + 'km'"></cell>
          <cell title="服务类型" value-align="left" v-if="dataObj.service" :value="dataObj.service"></cell>
          <cell title="货物详情" value-align="left" class="fourzi" v-if="dataObj.goods_info">
            <div slot="value" class="overflowtext">
              <span style="color: #149ede;" @click="show = true" v-if="dataObj.goods_img1 || dataObj.goods_img2"><i class="icon icon-image" style="font-size: 0.32rem;"></i>查看图片</span>
              <span>{{dataObj.goods_info}}</span>
            </div>
          </cell>
          <cell title="货物参数" value-align="left">
            <div slot="value" class="overflowtext text-left">
              <span v-if="dataObj.weight > 0">重量:{{dataObj.weight}}{{dataObj.unit || '吨'}}</span>
              <span v-if="dataObj.volume > 0">体积:{{dataObj.volume}}方</span>
              <span v-if="dataObj.number > 0">数量:{{dataObj.number}}件</span>
            </div>
          </cell>
          <cell title="最高报价" value-align="left" v-if="dataObj.budget_freight" :value="dataObj.budget_freight + '元'"></cell>
          <div class="vux-x-input weui-cell weui-vcode">
            <div class="weui-cell__hd">
              <label class="weui-label" style="width: 1.5rem">报价金额</label>
            </div>
            <div class="weui-cell__bd weui-cell__primary">
              <input class="weui-input" @input="keyMoney" placeholder="请输入总报价" v-model="money" />
            </div>
          </div>
          <cell :title="serviceid == 8?'平台调度费': '调度费'" value-align="left">
            <span class="text-orange">{{ ddf || 0 }}</span>
          </cell>
        </group>
        <!--<p class="notice-cell">调度费是保障您的报价权益，若未中标将退回您的账户</p>-->

        <p style="line-height: 1.4rem; font-weight: bold;" class="text-center text-orange">支付金额：{{ ddf || 0 }}元</p>

        <div class="footer-action">
          <x-button type="primary" :show-loading="confirmLoading"  action-type="button" @click.native="handleConfirm">确认</x-button>
        </div>
      </div>

      <div class="xdialog" @click="show = false" v-if="show">
        <swiper :height="$store.state.bodyHeiht">
          <swiper-item class="flex flex-middle" v-for="item in imgUrl" :key="item">
            <img :src="item" class="img-responsive-h img-responsive">
          </swiper-item>
        </swiper>
      </div>
    </div>
</template>
<script>
  import { globalKeyUp, setObjectVal, isWechat, getWechatConfig, toPayWechat } from '../libs/fn'
  import PubHeader from '../components/PubHeader.vue'
  import { Cell, LoadMore, TransferDom, Swiper, SwiperItem  } from 'vux'
  export default{
    directives: {
      TransferDom
    },
    components: {
      PubHeader,
      Cell,
      Swiper,
      SwiperItem,
      LoadMore
    },
    computed: {
      url() {
        const { service_id } = this.$store.state.userInfo
        if(service_id == 6) {
          return $config.host + '/api/Inquirycitycar/quotesOrderInfo'
        } else if(service_id == 7) {
          return $config.host + '/api/Inquiryzerobear/getOrderInfo'
        } else if(service_id == 8) {
          return $config.host + '/api/Inquirycityvehicle/getOrderInfos'
        }
      },
      confirmUrl() {
        const { service_id } = this.$store.state.userInfo
        if(service_id == 6) {
          return $config.host + '/api/Inquirycitycar/quotesCityCar'
        } else if(service_id == 7) {
          return $config.host + '/api/Inquiryzerobear/quotesZeroBear'
        } else if(service_id == 8) {
          return $config.host + '/api/Inquirycityvehicle/capacityDriverOffer'
        }
      }
    },
    created() {
      const {oid} = this.$route.query
      const {uid} =  this.$store.state.userInfo
      if(!oid) {
        this.$router.push('/')
        return
      }
      this.$http.post(this.url, qs.stringify({
        uid,
        oid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then((res) => {
        const {code, data, msg} = res.data
        this.loading = true
        if(code == '1') {
          this.dataObj = data
          this.percentage = data.percentage
          if(data.goods_img1){
            this.imgUrl.push(data.goods_img1)
          }
          if(data.goods_img2){
            this.imgUrl.push(data.goods_img2)
          }
          const { service_id } = this.$store.state.userInfo
          if(service_id == 8) {
            this.dataObj.get_addr = this.dataObj.get_addrs
          }
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        }else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    data() {
      return {
        serviceid: this.$store.state.userInfo.service_id,
        dataObj: [],
        loading: false,
        show: false,
        percentage: 0,
        confirmLoading: false,
        ddf: '',
        money: '',
        imgUrl: []
      }
    },
    methods: {
      keyMoney(e) {
        const { budget_freight } = this.dataObj
        this.money = globalKeyUp(e.target)
        if(!this.money || this.money <= 0 || this.money == '.'){
          this.ddf = '';
          return
        }
        if(parseFloat(this.money) > parseFloat(budget_freight) && parseFloat(budget_freight) > 0) {
          this.money = budget_freight
        }
        this.ddf = parseFloat(this.money * (1 - this.percentage)).toFixed(2);
      },
      subOrder() {
        this.confirmLoading = true
        const {oid} = this.$route.query
        const {uid} =  this.$store.state.userInfo
        this.$http.post(this.confirmUrl, qs.stringify({
          uid,
          oid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          total_price: this.money,
          pay_type: 3
        })).then((res) => {
          const {code, msg, data} = res.data
          if(code == '1') {
            this.$vux.toast.text('报价成功', 'middle')
            if(this.serviceid == 8) {
              this.$router.push({path: '/bid2'})
            } else {
              this.$router.go(-2)
            }

          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else if (code == '4') {
            this.$vux.confirm.show({
              title: '<i class="icon icon-gantanhao"></i>',
              content: '您的余额不足以支付本次报价！',
              confirmText: '去支付',
              cancelText: '取消',
              onConfirm: () => {
                this.topay(data.tobepay)
              },
              onCancel: () => {
                this.confirmLoading = false
              }
            })
          } else {
            this.confirmLoading = false
            this.$vux.toast.text(msg, 'middle')
          }
        }).catch((err) => {
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },
      topay(money) {
        if(isWechat()) {
          toPayWechat(parseFloat(money).toFixed(2), {
            uid: this.$store.state.userInfo.uid,
            token: this.$store.state.userInfo.token
          }, () => {
            setTimeout(() => {
              this.subOrder()
            }, 500)
          })
        }
      },
      handleConfirm() {
        if(!this.money || this.money <= 0 || this.money == '.'){
          this.$vux.toast.text('请填写报价总额', 'middle')
          return
        }
        let arr = [this.dataObj.p_addr]
        this.dataObj.get_addr.map(item => {
          arr.push(item.get_addr.indexOf('http') > -1? '拍照地址': item.get_addr)
        })
        this.$vux.confirm.show({
          title: '<i class="icon icon-gantanhao"></i>',
          content: arr.join('-') + ',您本单报价<b class="text-orange">' + this.money + '</b>元,是否确认报价',
          onConfirm: () => {
            this.subOrder()
          }
        })

      }
    }
  }
</script>

<style lang="less" scoped>
  .footer-action{
    height: 1.1rem;
    line-height: 0.9rem;
    padding: 0.1rem 0.2rem;
    margin-top: 0.3rem;
  }
  .close{
    height: 0.9rem;
   line-height: 0.9rem;
    width: 100%;
    display: block;
  }
  .xdialog{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 99;
  }
</style>
